<template>
  <div class="admin_index">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品分类</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="addNewChild(0)">新增分类</el-button>
      </div>

      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="全部分类"></el-table-column>
        <el-table-column prop="cover_img" label="封面图片">
          <template slot-scope="scope">
            <!-- <span>{{scope.row.cover_img}}</span> -->
            <img v-if="scope.row.cover_img" :src="scope.row.cover_img" alt="" style="width:200px;height:100px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="icon_img" label="图标">
          <template slot-scope="scope">
            <!-- <span>{{scope.row.cover_img}}</span> -->
            <img v-if="scope.row.icon_img" :src="scope.row.icon_img" alt="" style="width:100px;height:100px;"/>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="280">
          <template slot-scope="scope">
            <el-button type="text" @click="navTo(scope.row.id)">查看商品</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="addNewChild(scope.row)">新增子分类</el-button>
            <el-button type="text" size="small" @click="deleteClass(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增 -->
    <el-dialog title="新增" :visible.sync="centerDialogVisible" width="30%" center>
      <span>上一级分类：{{cur_parent.name || '无'}}</span>
      <el-input placeholder="新增分类名称" v-model="new_name" style="margin-top:10px"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑弹框 -->
    <el-dialog title="编辑" :visible.sync="editDialog" width="40%" center>
      <el-form :label-position="'left'" label-width="80px" :model="edit_class">
        <el-form-item label="分类名称">
          <el-input placeholder="输入新的分类名称" v-model="edit_class.name"></el-input>
        </el-form-item>
        <el-form-item label="封面图片">
          <el-upload
            class="avatar-uploader"
            ref="selfUpload"
            action=""
            :show-file-list="false"
            :http-request="upload"
          >
            <img v-if="edit_class.cover_img" :src="edit_class.cover_img" class="cover" />
            <i v-else class="el-icon-plus avatar-uploader-icon cover"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="分类图标">
          <el-upload
            class="avatar-uploader"
            ref="selfUploadIcon"
            action=""
            :show-file-list="false"
            :http-request="iconUpload"
          >
            <img v-if="edit_class.icon_img" :src="edit_class.icon_img" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon avatar"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-button @click="submit">test</el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList:[],
      //表数据
      tableData: [],

      //新增弹框显示
      centerDialogVisible: false,
      cur_parent: {},
      new_name: "",

      //编辑弹框显示
      editDialog: false,
      edit_class: {

      },
      imageUrl: ""
    };
  },
  mounted() {
    this.getPage();
  },
  methods: {
    submit(){
      console.log(this.fileList)
    },
    iconUpload(params){
      const _file = params.file;
      const isLt2M = _file.size / 1024 / 1024 < 2;


      // 通过 FormData 对象上传文件
      var formData = new FormData();
      formData.append("file", _file);

      if (!isLt2M) {
        this.$message.error("请上传2M以下的文件");
        return false;
      }

      this.$api.fileApi.upload(formData)
      .then(res=>{
        this.edit_class.icon_img = res.data.data
      })
      .catch(err=>console.log(err))

    },
    upload(params){

      const _file = params.file;
      const isLt2M = _file.size / 1024 / 1024 < 2;


      // 通过 FormData 对象上传文件
      var formData = new FormData();
      formData.append("file", _file);

      if (!isLt2M) {
        this.$message.error("请上传2M以下的文件");
        return false;
      }

      

      this.$api.fileApi.upload(formData)
      .then(res=>{
        this.edit_class.cover_img = res.data.data
      })
      .catch(err=>console.log(err))

    },

    navTo(id) {
      this.$router.push({
        path: "/cms/user/good_list",
        query: { id, parent: "商品分类" }
      });
    },

    async edit() {
      const res = await this.$api.goodsApi.goodsEdit(this.edit_class);
      this.editDialog = false;
      this.getPage();
    },

    //编辑按钮
    handleClick(row) {
      this.edit_class = row;
      this.editDialog = true;
    },
    async deleteClass(row) {
      const res = await this.$api.goodsApi.goodsDelete({
        id: row.id
      });
      console.log("删除", res);
      this.getPage();
    },
    addNewChild(row) {
      this.centerDialogVisible = true;
      if (!row) {
        this.cur_parent = {};
      } else {
        this.cur_parent = row;
      }
    },
    async add() {
      const parent_id = this.cur_parent.id || 0;
      const name = this.new_name;

      const data = {
        parent_id,
        name
      };

      if (name) {
        const res = await this.$api.goodsApi.goodsAdd(data);
        this.new_name = "";
        this.centerDialogVisible = false;
        this.getPage();
      }
    },
    async getPage() {
      const res = await this.$api.goodsApi.goods();
      console.log(res.data.data);
      this.tableData = res.data.data;
    }
  }
};
</script>

<style lang="less" scoped>
.admin_index {
  padding: 20px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
/deep/.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
/deep/.cover {
  width: 180px;
  height: 100px;
  display: block;
}
</style>